<template>
	<view class="content">
        <mine-head title="发布"></mine-head>
		<view class="textC">
            <textarea v-model="content" placeholder="分享你的冥想心得和经验吧"></textarea>
        </view>
        <view class="imgList clearC">
            <u-upload :action="action" :header="header" :form-data="form" @on-uploaded='upload' ></u-upload>
        </view>
        <view class="info">
            <view class="title">添加话题</view>
            <view class="btn" @click="show=true">{{topic || '选择合适的话题，让更多人看到吧~'}}</view>
        </view>
        <view class="icn" @click="publicShow=true">{{isPublic==0?'不公开':'公开'}}</view>
        <view class="btn-box">
        	<u-button class="btn" @click="submit" size="default" shape="circle" type="primary">提交</u-button>
        </view>
        
        <u-action-sheet :list="publicList"  @click="publicClick" v-model="publicShow"></u-action-sheet>
        <view class="tanBox" :class="{show:show}">
            <view class="bg" @click="show=false"></view>
            <view class="con">
                <view class="btn" @click="show=false"></view>
                <view class="title"><view>热门话题</view></view>
                <view class="list">
                    <view class="item" v-for="(item,index) in list" :key="index" @click="change(item.title)">
                        <view class="l">{{item.title}}?</view>
                        <view class="r">{{item.degreeHeat}}</view>
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
    import config from '@/utils/config';
	export default {
		data() {
			return {
				action: config.host1 + "/app/common/upload",
                topic:null,
                content:null,
                mulImg:[],
                isPublic:1,
                form:{
                    path:"dynamic",
                    oldFile:null
                },
                header:{
                    authorization: uni.$_getToken()
                },
                show:false,
                list:[],
                publicShow:false,
                publicList:[{text: '公开'},{text: '不公开'}]
			};
		},
        onLoad() {
        	this.getList()
        },
        methods:{
            getList(){
                let that = this;
                uni.$_get({
                	url: "upDate-list",
                	that: that,
                	success(res) {
                		if(res.code == 0){
                			that.list = res.data
                			console.log(that.list,666)
                		}
                	},
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
            upload(lists){
                var list=[]
                lists.forEach(item => {
                    list.push(item.response.data)
                })
                this.mulImg=list
            },
            change(obj){
                this.topic=obj
                this.show=false
            },
            publicClick(index){
                this.isPublic=index==0?1:0
            },
            submit(){
                let that = this;
                let p = {
                    content:this.content,
                    topic:this.topic,
                    mulImg:this.mulImg,
                    isPublic:this.isPublic
                }
                uni.$_post({
                    url: 'upDate',
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            uni.$u.toast(res.msg)
                            setTimeout(()=>{
                                uni.navigateBack(-1)
                            },1000)
                            
                        }
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
            }
        }
	}
</script>

<style lang="scss">
    .content{
        padding: 70rpx 40rpx 0;
        min-height: calc(100vh - 100rpx);
        box-sizing: border-box;
        background: #fff;
        .textC{
            margin-bottom: 30rpx;
            textarea{
                display: block;
                height: 170rpx;
                width: 100%;
                box-sizing: border-box;
                font-size: 30rpx;
                line-height: 38rpx;
                color: #333;
                &::placeholder{
                    font-size: 30rpx;
                    line-height: 38rpx;
                    color: #888888;
                }
            }
        }
        .imgList{
            margin-bottom: 30rpx;
            .pic{
                width: calc(33.3333% - 15rpx);
                margin-right: 20rpx;
                border-radius: 12rpx;
                float: left;
                display: inline;
                margin-bottom: 20rpx;
                background: #f00;
                &::before{padding-top: 100%;}
                image{
                    border-radius: 12rpx;
                }
                text{
                    position: absolute;
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 50%;
                    right: -20rpx;
                    top: -20rpx;
                    line-height: 40rpx;
                    text-align: center;
                    background: rgba(0, 0, 0, 0.5);
                    font-size: 28rpx;
                    color: #fff;
                }
            }
            .pic:nth-child(3n){
                margin-right: 0;
            }
            .pic:last-child{
                background: #f7f7f7 url("/static/img/community/jia.png") no-repeat center / 60rpx;
            }
        }
        .info{
            display: flex;
            justify-content: space-between;
            margin-bottom: 50rpx;
            .title{
                font-size: 30rpx;
                font-weight: bold;
                color: #333333;
                line-height: 32rpx;
                padding-left: 40rpx;
                background: url("/static/img/community/bs.png") no-repeat center left / 25rpx;
            }
            .btn{
                font-size: 22rpx;
                color: #666666;
                line-height: 32rpx;
                padding-right: 45rpx;
                background: url("/static/img/community/btn.png") no-repeat center right / 14rpx;
            }
        }
        .icn{
            display: inline-block;
            height: 46rpx;
            line-height: 46rpx;
            font-size: 24rpx;
            color: #010e32;
            box-sizing: border-box;
            padding:0 40rpx 0 20rpx;
            border-radius: 30px;
            background: #f3f4f4 url("/static/img/community/btnx.png") no-repeat center right 20rpx / 14rpx ;
        }
        .tanBox{
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            visibility: hidden;
            .bg{
                display: block;
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                visibility: hidden;
                background: rgba(0, 0, 0, 0);
                transition: all .4s ease;
            }
            .con{
                position: absolute;
                left: 0;
                bottom: 0;
                right: 0;
                visibility: hidden;
                background: #fff;
                border-top-right-radius: 50rpx;
                border-top-left-radius: 50rpx;
                padding: 0 50rpx;
                z-index: 2;
                transition: all .4s ease;
                transform: translateY(100%);
                .btn{
                    height: 45rpx;
                    margin-bottom: 54rpx;
                    background: url("/static/img/community/btnD.png") no-repeat center / 64rpx;
                }
                .title{
                    position: relative;
                    margin-bottom: 60rpx;
                    &::before{
                        display: block;
                        content: "";
                        position: absolute;
                        left: 0;
                        bottom: -3rpx;
                        width: 70rpx;
                        height: 10rpx;
                        background: #bdcbfd;
                        border-radius: 30px;
                    }
                    view{
                        font-size: 36rpx;
                        color: #333;
                        font-weight: bold;
                        line-height: 38rpx;
                        position: relative;
                        z-index: 2;
                    }
                }
                .list{
                    height: 35vh;
                    overflow-y: scroll;
                    .item{
                        display: flex;
                        justify-content: space-between;
                        line-height: 30rpx;
                        margin-bottom: 60rpx;
                        .l{
                            font-size: 28rpx;
                            color: #111111;
                            padding-left: 40rpx;
                            background: url("/static/img/community/bs.png") no-repeat center left  / 25rpx;
                        }
                        .r{
                            font-size: 23rpx;
                            color: #b5c2ca;
                            padding-left: 28rpx;
                            background: url("/static/img/community/huo.png") no-repeat center left  / 18rpx;
                        }
                    }
                }
            }
        }
        .tanBox.show{
            visibility: visible;
            z-index: 10;
            .bg{
                background: rgba(0, 0, 0, 0.5);
                visibility: visible;
            }
            .con{
                visibility: visible;
                transform: translateY(0);
            }
        }
        /deep/.u-btn--primary{
        		background-color: #6387FF;
        		border-color: #6387FF;
        	}
        .btn-box{
        	position: fixed;
        	bottom: 40rpx;
        	left: 0;
        	width: 100%;
        	padding: 0 50rpx;
        	box-sizing: border-box;
            .btn{
                margin: 30rpx 0;
            }
        }
    }
</style>
